<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/* 媒体查询的基础语法 */
	/*  设备的屏幕尺寸 大于 等于 480的时候 使用 括号内的样式
		也遵循  层叠样式表的 
		为了避免样式覆盖
			可以 修改 先后顺序
	  */
		
		@media screen and (min-width: 480px) {
			    body {
			        background-color: lightgreen;
			    }
		}

		@media screen and (min-width: 300px) {
			    body {
			        background-color: skyblue;
			    }
		}

	</style>
</head>
<body>
	
</body>
</html>